<template>
  <div>
    <el-container>
      <el-header>
        <Nav>
          <i @click="goback" class="el-icon-arrow-left" slot="icon"></i>
          <p class="title" slot="input">购物车</p>
          <i class="el-icon-more" slot="login"></i>
        </Nav>
      </el-header>
      <el-main>
        <div class="cart-box" v-for="(item, index) in cart" :key="index">
          <img class="shop-img" :src="item.img" alt="" />
          <div>
            <div class="shop-title">
              {{ item.title.slice(0, 25) + "..." }}
            </div>
            <div class="price-box">
              <div class="shop-price">￥{{ item.price }}</div>
              <el-input-number
                v-model="item.num"
                :min="1"
                :max="99"
                label="描述文字"
                @click.native="changeUserCart"
              ></el-input-number>
            </div>
          </div>
        </div>
        <div class="all-price">
            <!-- 中间的合计 -->
            <div>
                <span>合计：</span>
                <span class="total-price">￥{{totalPrice.toFixed(2)}}</span>
            </div>

            <!-- 结算按钮 -->
            <button type="button" class="btn btn-primary btn-settle">结算</button>
        </div>
      </el-main>
      <el-footer>
        <Footer-Box></Footer-Box>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { Nav } from "../nav/index.js";
import { FooterBox } from "../footerBox/index.js";
import axios from "axios";
export default {
  data() {
    return {
      input: "",
      cart: [],
      total:0
    };
  },
  components: {
    Nav,
    FooterBox,
  },
  methods: {
    goback() {
      this.$router.push("/");
    },
    getUserCart() {
      axios.get("/getUserCart").then((data) => {
        this.cart = data.data;
      });
    },
    changeUserCart() {
        axios.post('/changeUserCart',{
            cart:this.cart
        }).then((data) => {
            this.cart = data.data
        })
    },
    
  },
  computed: {
    totalPrice() {
        var all = this.total
        this.cart.forEach((item,index) => {
            all += item.num * item.price
        })
        this.total = 0
        return all
    }
  },
  created() {
    if (document.cookie == "") {
      this.$message({
        message: "用户未登录",
        type: "error",
      });
    } else {
      this.getUserCart();
    }
  },
};
</script>

<style scoped>
.nav-box {
  background-color: #fff;
  border-bottom: 1px solid #c2c8d1;
}
.el-header {
  height: 46px !important;
}
.el-container {
  height: 100vh;
  display: flex;
}
i {
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
}
.title {
  text-align: center;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
}
.el-main {
  position: relative;
  background-color: #f4f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}
.cart-box {
  height: 100px;
  width: 95%;
  background-color: #fff;
  margin: 5px 0px !important;
  display: flex;
  border-radius: 10px;
}
.shop-img {
  height: 100px;
  width: 100px;
  border-radius: 10px;
}
.shop-title {
  font-size: 14px;
}
.shop-price {
  color: #ff4142;
}
.el-footer {
  height: 50px !important;
  width: 100vw;
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  padding: 0px;
}
.price-box {
  position: relative;
  width: 100%;
  height: 40px;
}
.shop-price {
  position: absolute;
  top: 25px;
}
.el-input-number {
  position: absolute;
  right: 10px;
  top: 15px;
  width: 70px !important;
}
.el-input-number >>> .el-input-number__increase {
  width: 20px !important;
}
.el-input-number >>> .el-input-number__decrease {
  width: 20px !important;
}
.all-price {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #fff;
  bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}
.btn-settle {
  height: 80%;
  min-width: 110px;
  border-radius: 25px;
  font-size: 16px;
  background-color: #1d7bff;
}

#cbFull {
  margin-right: 5px;
}

.total-price {
  font-weight: bold;
  font-size: 16px;
  color: red;
}
</style>